<template>
    <div class="dankal-image-upload">
        <p v-for="(item,index) in list" :key="index">
            <img class="upload_img" :src="imgDomain + item" alt="">
            <img class="close" src="@/assets/images/ic_delete.png" @click="onDeleted(index)">
        </p>
        <div class="add-box" v-if="list.length < limit">
            <img @click='onSelected' class="add" src="@/assets/images/pic_add_1.png" alt="">
            <!--       <span v-if="type == 1">上传图片({{ list.length }}/{{ limit }})</span>
      <span v-if="type == 2">尺寸：695*418像素，图片格式JPG,png</span> -->
        </div>
        <input ref="input" type="file" id="file" accept="image/mp4" style="display:none;" @change="onFileChanged">
    </div>
</template>

<script>
    import ImageCompressor from 'image-compressor.js';
    import {uploadImg,qiniuInfo} from '@/api/common';
    import {mapState,mapActions} from 'vuex';

    export default {
        name: 'DankalImageUpload',

        data() {
            return {
                list: [],
                toast: '',
            };
        },
        created() {},
        props: {
            value: {
                type: Array,
                required: true,
            },
            limit: {
                type: Number,
                default: 3,
            },
            quatity: {
                type: Number,
                default: 0.6,
            },
            // 1是帖子上传图片，2是上传封面图，3是上传反馈
            type: {
                type: Number,
                default: 1,
            },
        },

        watch: {
            value(n) {
                this.list = n;
            },
        },
        computed: {
            ...mapState(['imgDomain'])
        },
        mounted() {
            this.list = this.value;
        },

        methods: {
            ...mapActions(['getUrlAndTokenOfImageUpload']),
            onSelected() {
                const {limit,list} = this;
                if (limit && list.length >= limit) {
                    this.$message(`只能上传${limit}张图片`)
                    return;
                }
                this.$refs.input.click();
            },

            onDeleted(index) {
                // Array.prototype.splice(this.list, index, 1);
                this.list.splice(index, 1)
                this.$emit('input', this.list);
            },

            onFileChanged(event) {
                const file = event.target.files[0];
                this.getUrlAndTokenOfImageUpload();
                if (!file) return;

                // eslint-disable-next-line
                new ImageCompressor(file, {
                    quatity: this.quatity,
                    // eslint-disable-next-line
                    success: result => {
                        this.upload(result);
                    },
                    // eslint-disable-next-line
                    error: error => {
                        this.$message(`${error.message}`)
                    },
                });
            },

            async upload(file) {
                //首先获取七牛信息
                const {data,status} = await qiniuInfo();
                if (status !== 200) return
                // await this.$store.dispatch('getUrlAndTokenOfImageUpload')
                const formData = new FormData();
                formData.append('token', data.result.token)
                formData.append('file', file);
                const res = await uploadImg(formData).catch(() => {});
                if (res.status === 200) {
                    this.list.push(res.data.hash);
                    this.$emit('input', this.list);
                }
            },
        },
    };
</script>

<style lang="less" scoped>
    .dankal-image-upload {
        display: flex;
        flex-wrap: wrap;

        p {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 20px 10px 20px 30px;
            float: left;

            .upload_img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .close {
                width: 20px;
                height: 20px;
                position: absolute;
                cursor: pointer;
            }
        }

        .add-box {
            display: flex;
            flex-direction: column;
            padding-left: 20px;
            margin-top: 20px;

            .add {
                width: 150px;
                height: 150px;
            }

            span {
                color: #CFCFCF;
                font-size: .22rem;
            }
        }
    }
</style>
